import React, { useState, useEffect } from 'react';
import './index.css';
import { Button, Select, Radio, Input, Checkbox, DatePicker } from 'antd';
import Editor from '../../../Editor';
import { request } from 'umi';

export default function index() {
  const { Search } = Input;
  const [contentData, setContentData] = useState('赵家兴制作'); // 富文本数据
  const setDetails = (content) => setContentData(content);
  useEffect(() => {});
  // 数据
  const [list, setList] = useState(
    JSON.parse(sessionStorage.getItem('tasklistji')),
  );
  //登录之后的用户信息
  const [userMessage, setMessage] = useState(
    JSON.parse(sessionStorage.getItem('userMessage')),
  );
  // 存储任务名称
  const [tasknamedata, settasknamedata] = useState();
  // 存储任务级别
  const [taskleveldata, settaskleveldata] = useState('重要');
  // 开始日期
  const [topdatadata, settopdatadata] = useState();
  // 结束日期
  const [enddatadata, setenddatadata] = useState();
  function baocundata() {
    const posydata = {
      taskname: tasknamedata,
      faname: userMessage.username,
      tasklevel: taskleveldata,
      taskstart: '未开始',
      person: huoze,
      xieperson: xieren,
      zhiperson: zhihui,
      topdata: topdatadata,
      enddata: enddatadata,
      taskexplain: contentData,
    };
    console.log(posydata);
    let url = '/api/task/tasklistdata';
    request(url, {
      method: 'post',
      data: posydata,
    }).then((res) => {
      alert('添加成功');
    });
  }
  function tasknamedataclick(e) {
    settasknamedata(e.target.value);
  }
  function taskleveldataclick(e) {
    settaskleveldata(e.target.value);
  }
  function topdatadataclick(e) {
    var fen = new Date().getMonth() + 1;
    settopdatadata(
      new Date(e).getFullYear() + '/' + fen + '/' + new Date(e).getDate(),
    );
  }
  function enddatadataclick(e) {
    var fen = new Date().getMonth() + 1;
    setenddatadata(
      new Date(e).getFullYear() + '/' + fen + '/' + new Date(e).getDate(),
    );
  }
  const [huoze, sethuoze] = useState();
  function huozeren(e) {
    sethuoze(e.target.value);
  }
  const [xieren, setxieren] = useState();
  function xierenfang(e) {
    setxieren(e.target.value);
  }
  const [zhihui, setzhihui] = useState('');
  function zhihuipren(e) {
    setzhihui(e.target.value);
  }
  return (
    <div>
      <div>
        <Button className="user_btn" onClick={baocundata}>
          保存
        </Button>
        <Button className="user_btn" onClick={baocundata}>
          保存且新增
        </Button>
        <Button className="user_btn">草稿箱</Button>
        <Button className="user_btn">导入</Button>
      </div>
      <div className="initiatetaskbody">
        <div className="initiatetaskbodytop">
          <h1>发起任务</h1>
        </div>
      </div>
      <div>
        <table border={1}>
          <tr>
            <td className="title">任务名称：</td>
            <td className="shuru">
              <Input onChange={tasknamedataclick}></Input>
            </td>
            <td className="title">发起人：</td>
            <td className="shuru">
              <Input
                disabled={true}
                defaultValue={userMessage.username}
              ></Input>
            </td>
          </tr>
          <tr>
            <td className="title">任务级别：</td>
            <td className="shuru">
              <Radio.Group defaultValue={'重要'} onChange={taskleveldataclick}>
                {/* <Radio value={'重要'}>重要</Radio>
                <Radio value={'紧急'}>紧急</Radio>
                <Radio value={'要命'}>要命</Radio> */}
                {list.map((res) => {
                  return <Radio value={res.title}>{res.title}</Radio>;
                })}
              </Radio.Group>
            </td>
            <td className="title">任务状态：</td>
            <td className="shuru">
              <Radio.Group disabled={true} value={'未开始'}>
                <Radio value={'未开始'}>未开始</Radio>
                <Radio value={'进行中'}>进行中</Radio>
                <Radio value={'已完成'}>已完成</Radio>
              </Radio.Group>
            </td>
          </tr>
          <tr>
            <td className="title">责任人：</td>
            <td className="shuru">
              <Search style={{ width: 530 }} onChange={huozeren} />
            </td>
            <td className="title">知会人：</td>
            <td className="shuru">
              <Search style={{ width: 530 }} onChange={zhihuipren} />
            </td>
          </tr>
          <tr>
            <td className="title">开始日期：</td>
            <td className="shuru">
              {' '}
              <DatePicker style={{ width: 530 }} onChange={topdatadataclick} />
            </td>
            <td className="title">协办人：</td>
            <td>
              <Search style={{ width: 530 }} onChange={xierenfang} />
            </td>
          </tr>
          <tr>
            <td className="title">结束日期：</td>
            <td className="shuru">
              {' '}
              <DatePicker style={{ width: 530 }} onChange={enddatadataclick} />
            </td>
            <td className="title"></td>
            <td></td>
          </tr>
          <tr>
            <td className="title" style={{ height: '300px' }}>
              任务说明：
            </td>
            <td colspan={3} style={{ height: '300px' }}>
              <Editor setDetails={setDetails} content={contentData}></Editor>
            </td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div style={{ marginTop: '20px' }}>
        <div className="taskbuttomtop">
          <p style={{ marginLeft: '10px' }}>附件上传</p>
          <Button className="user_btn">批量上传</Button>
        </div>
        <table border={1}>
          <tr>
            <td className="title1" style={{ width: '500px' }}>
              文件名称
            </td>
            <td className="title1">文件大小</td>
            <td className="title1">上传人</td>
            <td className="title1">上传时间</td>
            <td className="title1"></td>
            <td className="title1"></td>
            <td className="title1"></td>
            <td className="title1"></td>
            <td className="title1"></td>
          </tr>
          <tr>
            <td className="taskbuttombuttom" colspan={9}></td>
          </tr>
        </table>
      </div>
    </div>
  );
}
